<template>
  <div class="login">
    <div class="box">
      <h1>叩丁商品管理系统</h1>
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
        <el-form-item prop="username">
          <el-icon size="40">
            <Avatar />
          </el-icon>
          <el-input input-style="color:white" placeholder="请输入用户名" class="inputDeep" v-model="ruleForm.username"
            type="text" autocomplete="off">
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input input-style="color:white" placeholder="请输入密码" class="inputDeep" v-model="ruleForm.password"
            type="password" autocomplete="off" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm()">登陆</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import * as http from "@/request/api";
import cookie from 'js-cookie'
import { ElMessage } from 'element-plus'
import { useRouter } from "vue-router";
const Router = useRouter()
const ruleFormRef = ref();

// 用户名和密码
const ruleForm = reactive({
  username: "admin",
  password: "123456",
});

// 校验规则
const validatePass = (rule: unknown, value: string | undefined, callback: (msg?: string) => void) => {
  if (!value) {
    callback("请输入用户名");
  } else {
    callback();
  }
};
const validatePass2 = (rule: unknown, value: string | undefined, callback: (msg?: string) => void) => {
  if (!value) {
    callback("请输入密码");
  } else {
    callback();
  }
};
const rules = reactive({
  username: [{ validator: validatePass, trigger: "blur" }],
  password: [{ validator: validatePass2, trigger: "blur" }],
});

// 点击登陆
async function submitForm() {
  // ruleFormRef.value.validate((isValid: boolean) => {
  //   if (isValid) {
  //     console.log("校验通过");
  //   } else {
  //     console.log("为通过校验");
  //   }
  // });
  // ruleFormRef.value.validate().then(async () => {
  //   let loginRes = await http.admin.AdminLogin({
  //     username: ruleForm.username,
  //     password: ruleForm.password,
  //   });
  // }).catch((error: unknown) => {
  //   console.log(error);
  // });

  try {
    await ruleFormRef.value.validate();

    let loginRes = await http.admin.AdminLogin({
      username: ruleForm.username,
      password: ruleForm.password,
    });
    if (loginRes.code === 200) {
      cookie.set('token', loginRes.data.tokenHead + loginRes.data.token)
      const adminRes = await http.admin.AdminInfo()
      // 获取用户登陆信息  存入pinia
      // const useState = useAdminState()
      // useState.updateMenus(adminRes.data.menus)
      // 跳转
      Router.push('/index')
    } else {
      ElMessage({
        message: loginRes.message || '登陆失败',
        type: 'error',
      })
    }


  } catch (error) {
    console.log("未通过校验");
  }
  ruleForm.username = "";
  ruleForm.password = "";
};
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  background-color: rgb(45, 58, 75);
}

.box {
  width: 26%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-55%, -50%, 0);
}

.box h1 {
  color: white;
  text-align: center;
}

:deep(.el-button) {
  width: 100%;
  height: 40px;
}

:deep(.el-input__wrapper) {
  height: 45px;
  margin-bottom: 10px;
  background-color: rgb(40, 52, 67);
  box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
}
</style>
